<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="下单"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-calendar
      :min-date="min"
      :max-date="max"
      v-model="showC"
      :mode="'date'"
      @change="cT"
    ></u-calendar>
    <view class="scroll-content" hover-class="none" hover-stop-propagation="false">
      
      <u-popup v-model="showLocation" mode="bottom" border-radius="14">
        <view class="popup people">
          <view style="font-weight: bold; margin-bottom: 20rpx">选择地址</view>
          <view
            @click="curPIndex = pIndex"
            class="each"
            :class="{ eachChoose: curPIndex == pIndex }"
            v-for="(p, pIndex) in locations"
            :key="pIndex"
          >
            <view class="name">姓名：{{ p.name }}</view>
            <view class="cardno">电话：{{ p.phone }}</view>
            <view class="cardno">地址：{{ p.address }}</view>
            <view v-if="p.isDefault" class="defaultImg">默认地址</view>
          </view>
          <view class="btn" @click="addOrder">提交</view>
        </view>
      </u-popup>
      <view style="padding: 30rpx" v-for="good in goodsList">
        <view
          class="flex-center"
          hover-class="none"
          hover-stop-propagation="false"
        >
          <image class="goodimg" :src="good.goodsImg"></image>
          <view class="" hover-class="none" hover-stop-propagation="false">
            <view class="row">服务名称：{{ good.goodsName }}</view>
            <view
              class="row"
              style="padding-bottom: 12rpx;"
              >服务单价（元）：{{ good.goodsPrice }}</view
            >
            <view
              class="row"
              style="padding-bottom: 12rpx;"
              >数量（件）：
              <u-number-box @change="changeCnt" v-model="good.cnt"></u-number-box>
            </view>
          </view>
        </view>

        <view
          class="row"
          style="padding-bottom: 20rpx; border-bottom: 1rpx solid #999;"
          >清洗方式：
          <u-radio-group v-model="good.washWay" @change="changeCnt">
            <u-radio
              v-for="(item, index) in selections"
              :key="index"
              :name="item"
            >
              {{ item }}
            </u-radio>
          </u-radio-group>
        </view>
      </view>
      
      <view style="padding: 20rpx;" hover-class="none" hover-stop-propagation="false">
        <view @click="showC = true">{{ form.receivetime }}</view>
      </view>
    </view>

    <view class="pay">
      <view class="yue btn2">余额：{{ yue }}</view>
      <view style="padding: 2px 20rpx; font-weight: bold">
        <text style="font-size: 24rpx">订单总金额</text>
        <text style="font-size: 24rpx">¥</text>
        <text style="font-size: 30rpx">{{ totalPrice }}</text>
      </view>
      <view class="cart" @click="clickAdd">下单</view>
    </view>
  </view>
</template>

<script>
import { addOrder } from "../../api/system/api";
import moment from "moment";
export default {
  data() {
    return {
      serviceId: "",
      userInfo: {},
      serviceInfo: {},
      showC: false,
      showLocation: false,
      baseUrl: "http://127.0.0.1:3000/",
      locations: [],
      min: moment().format("YYYY-MM-DD"),
      max: moment().add(30, "days").format("YYYY-MM-DD"),
      showPop: false,
      form: {
        receivetime: "请选择取衣日期",
      },
      cartList: [],
      totalPrice: 0,
      yue: 0,
      curPIndex: null,
      selections: ["普通清洗", "深度清洗", "特殊材质清洗"],
      goodsList: [],
    };
  },
  onLoad(option) {
    this.userId = Number(option.userId);
    let goodId = option.goodId;
    this.goodsList = JSON.parse(option.goods);
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = res.data;
        this.yue = this.userInfo.money || 0;
        this.locations = this.userInfo.location
          ? JSON.parse(this.userInfo.location)
          : [];
        this.curPIndex = this.locations.findIndex((v) => v.isDefault);
      },
      error: (res) => {},
    });

    // 获取购物车缓存
    uni.getStorage({
      key: "cartList",
      success: (res) => {
        console.log(res);
      },
    });
  },
  methods: {
    addOrder() {
      let l = this.locations[this.curPIndex];
      addOrder({
        userId: this.userId,
        status: "已付款",
        location: `${l.name}-${l.phone}-${l.address}`,
        price: this.totalPrice,
        goodsinfo: JSON.stringify(this.goodsList.filter(v => v.cnt).map(v => {
          return {
            name: v.goodsName,
            cnt: v.cnt,
            price: v.goodsPrice,
            way: v.washWay,
          }
        })),
        orderNo: `${(Math.random() * 1000000).toFixed(0)}${moment().format(
          "YYYYMMDDHHmmss"
        )}`,
        ...this.form,
      }).then((res) => {
        if (res.code == "200") {
          this.$u.route("/pages/good/paySuccess");
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: "error",
          });
        }
      });
    },
    cT(e) {
      this.form.receivetime = e.result;
    },
    clickAdd() {
      let goods = this.goodsList.filter(v => v.cnt)
      if (goods.length === 0) {
        this.$refs.uToast.show({
          title: "请选择服务数量",
          type: "error",
        });
        return;
      }
      if (goods.some(v => !v.washWay)) {
        this.$refs.uToast.show({
          title: "请选择洗衣方式",
          type: "error",
        });
        return;
      }
      if (this.totalPrice > this.yue) {
        this.$refs.uToast.show({
          title: "余额不足",
          type: "error",
        });
        return;
      }
      if (this.form.receivetime == "请选择取衣日期") {
        this.$refs.uToast.show({
          title: "请输入取衣时间",
          type: "error",
        });
        return;
      }
      this.showLocation = true;
    },
    changeCnt() {
      let list = this.goodsList.filter(v => v.cnt && v.washWay)
      let total = 0;
      for (let item of list) {
        let price = Number(item.goodsPrice)
        if (item.washWay === '深度清洗') {
          price = price + 5
        } else if (item.washWay === '特殊材质清洗') {
          price = price + 10
        }
        total += item.cnt * price
      }
      this.totalPrice = total
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fff3f3;
}

.title {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  width: 100%;
  text-align: center;
  margin-top: 10rpx;
  color: #666;
}
.auther {
  width: 100%;
  text-align: left;
  margin-top: 10rpx;
  color: #333;
}
.aligntime {
  width: 100%;
  text-align: right;
  margin-top: 10rpx;
  color: #333;
}
.pay {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 100rpx;
  padding: 12rpx 20rpx;
  display: flex;
  background: #fff;
  padding-top: 20rpx;
  justify-content: flex-end;

  .yue {
    position: absolute;
    left: 20rpx;
    top: 10rpx;
  }
  .cart {
    padding: 10rpx 26rpx;
    height: 60rpx;
    line-height: 40rpx;
    text-align: center;
    color: #fff;
    background: red;
    border-radius: 30rpx;
  }
  .cart1 {
    background: rgb(157, 159, 13);
    margin-right: 30rpx;
  }
}
.row {
  line-height: 50rpx;
}

.people {
  padding: 30rpx;
  background: #fff;
  width: calc(100% - 60rpx);
  margin: auto;
  border-radius: 20rpx;
  .img {
    width: 30rpx;
    height: 30rpx;
  }

  .each {
    padding: 20rpx 0 20rpx 30rpx;
    border-bottom: 1rpx solid #e4dada;
    position: relative;
    .head {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-weight: bold;
    }
    .cardno {
      margin-top: 10rpx;
    }

    .defaultImg {
      color: red;
      background: lightcoral;
      padding: 6rpx 12rpx;
      color: #fff;
      font-weight: 400;
      font-size: 16rpx;
      position: absolute;
      right: 12rpx;
      top: 12rpx;
    }
  }

  .eachChoose {
    background: cyan;
  }

  .add {
    text-align: center;
    margin-top: 30rpx;
    width: 100%;
    font-weight: bold;
  }

  .check {
    position: absolute;
    left: -30rpx;
    top: 30rpx;
  }
}
.btn {
  padding: 12rpx 20rpx;
  color: #fff;
  background: red;
  border-radius: 30rpx;
  margin-left: 30rpx;
  text-align: center;
  margin-top: 20rpx;
}
.btn2 {
  padding: 0rpx 20rpx;
  color: red;
  border-radius: 30rpx;
  margin-left: 30rpx;
  text-align: center;
  margin-top: 20rpx;
}
.goodimg {
  width: 80rpx;
  height: 80rpx;
  margin-right: 40rpx;
}
.scroll-content {
  width: 100%;
  height: 82vh;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
